<template>
  <el-dialog :visible.sync="visible" width="40%" :before-close="close" @open="initData">
    <div class="tc">
      <el-progress
        :text-inside="true"
        :stroke-width="20"
        :percentage="progressNum"
        status="success"
      ></el-progress>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["visible", "progressStatus", "importData"],
  data() {
    return {
      progressNum: 10,
      startTimer: "",
      endTimer: "",
      params: {}
    };
  },
  watch: {
    progressStatus(val) {
      if (val) {
        this.endProgress();
      }
    },
  },
  methods: {
    //初始化
    initData() {
      this.progressNum = 10;
      this.startProgress();
    },
    // 关闭弹框
    close() {
      this.$emit("getProgressShow", false);
    },
    startProgress() {
      this.startTimer = setInterval(() => {
        this.progressNum++;
        if (this.progressNum > 85) {
          clearInterval(this.startTimer);
        }
      }, 100);
    },
    endProgress() {
      clearInterval(this.startTimer);
      this.endTimer = setInterval(() => {
        this.progressNum++;
        if (this.progressNum > 99) {
          clearInterval(this.endTimer);
          this.finishProgress();
        }
      }, 10);
    },
    finishProgress() {
      this.$emit("finishProgress", false);
    }
  }
};
</script>

<style lang='scss' scoped>
.success-wrap {
  height: 100px;
}
</style>
